<template>
    <p>基本指令</p>
    <p>a ：{{ a }}</p>
    <div v-html="spanHtml"></div>

    <button v-on:click="change">确定</button>
    <button @click="change">确定</button>


    <h2>v-if</h2>
    <p v-if="random >=0.8">大于0.8</p>
    <p v-else>小于0.8</p>
    <p>{{ random }}</p>
    <button @click="test">点击</button>

    <h2>v-for</h2>
    <ul>
        <li v-for="(item,index) in arr">{{ item }}</li>
    </ul>
    <ul>
        <li v-for="(value,key,index) in arr1">{{ key }}-{{ value }}</li>
    </ul>

</template>

<script setup>
 import { ref } from 'vue';
 const a = ref(0)
 const spanHtml = ref('<span>test</span>')

 const change =()=>{
    alert("咱都是学生")
 }
 const random = ref(0)
 const test = () =>{
    random.value = Math.random();
 }

const arr = ref([
    '起床',
    '吃早餐',
    '做家务',
    '休息一下'
])
const arr1 = ref({
    '8':'起床',
    "8:30":'吃早餐',
    "9":'做家务',
    "10":'休息一下'
})

</script>